<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>yun</title>
    <link rel="Shortcut Icon" href="../images/favicon.ico" />
    <link rel="stylesheet" href="../css/yun.min.css">
    <link rel="stylesheet" href="../assets/select/chosen.css">
</head>
<body>
<div class="my-container">
    <div class="nav">
        <div class="nav-item">
            <div class="text">
                <h3>你好</h3>
                <p><a href="">404页面</a></p>
            </div>
            <img src="../images/banner-min.jpg" alt="">
        </div>
        <div class="nav-item">
            <div class="text ">
                <h3>你好</h3>
                <p><a href="" rel="nofollow">浏览器提示升级页面</a></p>
                <div class="arrow"></div>
            </div>
            <img src="../images/banner-min.jpg" alt="">
        </div>
        <div class="nav-item">
            <div class="text ">
                <h3>你好</h3>
                <p><a href="" rel="nofollow">网络异常页面</a></p>
                <i class="icon"></i>
            </div>
            <img src="../images/banner-min.jpg" alt="">
        </div>
    </div>
</div>

<div class="my-container">
    <form action="" id="login-form">
        <div class="form">
            <div class="login-item">
                <label>用户名：</label>
                <input title="用户名" maxlength="20" name="username" id="userName" validate='[{"type":"notNull","msg":"用户名不能为空！"},
      {"type":"regex","reg":"^[a-zA-Z]{1}[a-zA-Z0-9]{2,9}$",
      "msg":"用户名必须是字母开头并且不能少于3位不能多余10位"}]'>
            </div>
            <div class="login-item">
                <label>密码：</label>
                <input title="密码" type="password" maxlength="20" name="password" id="password"
                       validate='[{"type":"notNull","msg":"密码不能为空！"}]'>
            </div>
            <div class="login-remember">
                <input type="checkbox" name="remember" class="checkbox" id="rmbUser">
                <label for="rmbUser">记住用户名</label>
                <a href="#">忘记密码?</a>
            </div>
            <div class="login-btn">
                <input type="submit" value="登录" class="">
            </div>
        </div>
    </form>
</div>

<div class="my-container">
    <div class="upimg-box">
        <div class="box-bg"></div>
        <div class="box-content">
            <div class="img-box">
                <div class="thumb-box"></div>
                <div class="spinner"></div>
            </div>
            <div class="img-action">
        <span class="btn-up">
          <label for="up-img" class="up-img">上传图像</label>
          <input type="file" name="up-img" id="up-img" accept="">
        </span>
                <button type="button" id="btnCrop" class="btn-crop">裁切</button>
                <button type="button" id="btnZoomOut" class="btn-zoom-in">-</button>
                <button type="button" id="btnZoomIn" class="btn-zoom-out">+</button>
            </div>
            <div class="cropped">
        <span class="big-img">
          <img src="" alt="" width="128" height="128">
        </span>
                <p>128px*128px</p>
                <span class="small-img">
          <img src="" alt="" width="64" height="64">
        </span>
                <p>64px*64px</p>
            </div>
        </div>
    </div>
</div>

<div class="my-container">
    <div class="up-user-img">上传头像</div>
</div>

<div class="my-container">
    <input class="html" title="">
    <button class="tbtn">按钮</button>
    <p class="pp" style="color: #ff0000"></p>
</div>

<div class="my-container">
    <select title="" name="" id="select">
        <option>你好吗</option>
        <option>我不好</option>
        <option>真不好？</option>
        <option>是的啊</option>
        <option>真的假的</option>
        <option>假的</option>
    </select>
</div>

<div class="my-container">
    <div class="rolling-box">
        <ul class="rolling cf">
            <li>
                <a href=""><img src="../images/banner-min.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../images/banner-min.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../images/banner-min.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../images/banner-min.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</div>

<div class="my-container">
    <button class="ajax">ajax</button>
</div>

<div class="my-container">
    <form action="">
        <label><span>姓名：</span><input></label>
        <label><span>remember password：</span><input type="checkbox"></label>
    </form>
</div>
<!--<div class="ad">
    <i class="fa fa-cog fa-spin"></i>
    <img src="../images/banner-min.jpg" alt="" width="100%" height="100%">
</div>-->
<script src="../assets/jquery1.9.1.min.js"></script>
<script src="../js/yun.js"></script>
<script>
  $(function () {
    $('.ajax').click(function (e) {
      e.stopPropagation();
      yunui.yunbox({
        title:'傻逼你好',
        url:'http://www.baidu.com',
        content:'<p>你好，帅哥</p>',
        pos:['c'],
        minmax:true,
        onclose:function (obj) {
        },
        onopen:function (obj) {
//          console.log(obj.find('p').text());
        },
        yes:function (obj) {
//          console.log(obj.find('p').text());
        }
      });
    });
  });
</script>
</body>
</html>